<template>
	<view>
		<view class="upload-container" v-if="!video.url">
			<view class="item-box">
				<uv-text text="从手机里选择要修改 MD5 的视频"></uv-text>
			</view>
			<view class="item-box">
				<uv-button type="primary" text="选择视频" @click="chooseVideo"></uv-button>
			</view>
		</view>
		<view class="vide-container" v-if="video.url">
			<uni-card class="card-box" margin="0px" padding="5px" spacing="0px">
				<view class="media-container">
					<video class="video-class" :src="video.url" :header="header" :autoplay="false" :custom-cache="false"
						:poster="video.cover"></video>
				</view>
				<view class="video-info-box">
					<uv-row customStyle="margin: 3px 30px">
						<uv-col span="3">
							<uv-text text="时长" size="10"></uv-text>
						</uv-col>
						<uv-col span="9">
							<text>{{video.duration+" 秒"}}</text>
						</uv-col>
					</uv-row>
					<uv-row customStyle="margin: 3px 30px">
						<uv-col span="3">
							<uv-text text="大小" size="10"></uv-text>
						</uv-col>
						<uv-col span="2">
							<uv-text :text="video.size" size="10"
								:decoration="`${video.nsize?'line-through':'none'}`"></uv-text>
						</uv-col>
						<uv-col span="7" v-if="video.nsize">
							<uv-text :text="video.nsize" size="10" :bold="true"></uv-text>
						</uv-col>
					</uv-row>

					<uv-row customStyle="margin: 3px 30px">
						<uv-col span="3">
							<uv-text text="分辨率" size="10"></uv-text>
						</uv-col>
						<uv-col span="9">
							<text>{{video.width+" x "+video.height}}</text>
						</uv-col>
					</uv-row>
					<uv-row customStyle="margin: 3px 30px">
						<uv-col span="3">
							<uv-text text="MD5" size="10"></uv-text>
						</uv-col>
						<uv-col span="9">
							<uv-text :text="video.md5" size="10"
								:decoration="`${video.nmd5?'line-through':'none'}`"></uv-text>
						</uv-col>
					</uv-row>
					<uv-row customStyle="margin: 3px 30px" v-if="video.nmd5">
						<uv-col span="3">

						</uv-col>
						<uv-col span="9">
							<uv-text :text="video.nmd5" size="10" :bold="true"></uv-text>
						</uv-col>
					</uv-row>

				</view>
				<view slot="actions" class="card-actions">
					<view class="card-actions-item">
						<uv-button type="info" :plain="true" :hairline="true" text="重选视频" @click="chooseVideo"
							iconColor="#007aff"></uv-button>
					</view>
					<view class="card-actions-item">
						<uv-button type="success" :hairline="true" text="修改MD5" iconColor="#007aff"
							@click="modifyMd5"></uv-button>
					</view>
					<view class="card-actions-item">
						<uv-button type="primary" :hairline="true" icon="download" text="保存视频"
							@click="downlaodSetting(()=>this.saveVideo())" iconColor="#fff"></uv-button>
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				header: {
					"Referer": ""
				},
				video: {
					url: ""
				}
			}
		},

		methods: {
			async chooseVideo() {
				this.video = {}
				const {
					tempFilePath,
					tempFile,
					duration,
					size,
					height,
					width
				} = await uni.chooseVideo({
					sourceType: ['album'],
					compressed: false
				})
				uni.showToast({
					title: "加载视频成功",
					duration: 2000
				})
				this.video.md5 = this.uuid()
				this.video.url = tempFilePath
				this.video.duration = duration
				this.video.size = (size / 1024 / 1024).toFixed(2) + " MB";
				this.video.height = height
				this.video.width = width
			},
			modifyMd5() {
				this.video.nmd5 = this.uuid()
				this.video.nsize = this.video.size
				uni.showToast({
					title: "修改成功",
					duration: 2000
				})
			},
			saveVideo() {
				uni.saveVideoToPhotosAlbum({
					filePath: this.video.url,
					success: () => {
						uni.showToast({
							title: "保存视频成功",
							duration: 2000
						})
					}
				})
			},
			downlaodSetting(fn) {
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success: () => {
									fn();
								},
								fail: (err) => {
									console.log('授权失败:', err)
								}
							})
						} else if (!res.authSetting['scope.writePhotosAlbum']) {
							wx.openSetting({
								success: (res) => {
									if (res.authSetting['scope.writePhotosAlbum']) {
										fn();
									}
								}
							})
						} else {
							fn();
						}
					}
				})
			},
			uuid() {
				var s = [];
				var hexDigits = "0123456789abcdef";
				for (var i = 0; i < 36; i++) {
					s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
				}
				s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
				s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
				s[8] = s[13] = s[18] = s[23] = "";

				var uuid = s.join("");
				return uuid;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upload-container {
		margin: 0px auto;
		width: 350px;
		height: 200px;
		border: 1px dashed #828282;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		justify-items: center;
		align-items: center;
		align-content: space-between;
	}

	.vide-container {
		.media-container {
			display: flex;

			.video-class {
				margin: 0px auto;
				width: 350px;
				height: 200px;
			}
		}

		.card-actions {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			height: 45px;
			border-top: 1px #eee solid;
		}

		.video-info-box {
			font-size: 10px;
		}

	}
</style>